<template>
  <div class="tool-bar">
    <div
      v-for="(item, index) in fields"
      :class="['tool-bar-item', { active: data === item.id }]"
      :key="index"
    >
      <div class="tool-content" @click="item.click">
        <svg-icon :icon-name="item.icon"></svg-icon>
        <span class="tool-label">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const $props = defineProps({
  modelValue: {
    type: [String, Number],
    required: true
  }
})
const $emit = defineEmits(['update:modelValue'])

const data = ref()

const fields = computed(() => [
  {
    id: 'tool-instance',
    icon: 'back',
    label: '副本',
    click: () => valueChange('tool-instance')
  },
  {
    id: 'tool-role',
    icon: 'back',
    label: '角色',
    click: () => valueChange('tool-role')
  },
  {
    id: 'tool-hire',
    icon: 'back',
    label: '雇佣',
    click: () => valueChange('tool-hire')
  },
  {
    id: 'tool-shop',
    icon: 'back',
    label: '商店',
    click: () => valueChange('tool-shop')
  },
  {
    id: 'tool-item',
    icon: 'back',
    label: '物品',
    click: () => valueChange('tool-item')
  },
  {
    id: 'tool-setting',
    icon: 'back',
    label: '设置',
    click: () => valueChange('tool-setting')
  }
])

watch(
  () => $props.modelValue,
  (value) => {
    data.value = value
  }
)

const valueChange = (value: string) => {
  if (data.value === value) {
    data.value = undefined
  } else {
    data.value = value
  }
  $emit('update:modelValue', data.value)
}
</script>

<style lang="scss">
.tool-bar {
  padding: 4px;
  border-radius: 4px;
  background-color: #333;
  display: block;
  width: 100%;

  .tool-bar-item {
    display: inline-block;
    user-select: none;

    .tool-content {
      cursor: pointer;
      padding: 4px 8px;
      background-color: #fff;
      color: #333;
      border-radius: 10px;
      border: 1px solid #666;

      &:hover {
        box-shadow: 0px 0 1px 1px #eee;
      }

      .tool-label {
        margin-left: 4px;
      }
    }

    &.active {
      .tool-content {
        background-color: #66d9ef;
        color: #fff;
      }
    }
  }

  .tool-bar-item + .tool-bar-item {
    margin-left: 5px;
  }
}
</style>
